<template>
  <a-modal
      :visible="enterpriseVisible"
      title="角色选择"
      @cancel="enterpriseCancel"
      @ok="enterpriseOk"
  >
    <a-form
        labelAlign="left"
        :labelCol="{
            span: 4
        }"
        :wrapperCol="{
            span: 20
        }"
        :form="enterpriseModalForm"
    >
      <a-form-item label="系统">
        <a-select
            placeholder='请选择系统'
            v-decorator="['sys', {rules: [{required: true, message: '请选择系统!'}]}]"
            @change="sysSelectChange"
        >
          <a-select-option v-for="option in roleListOptions" :key="option.id" :value="option.id">
            {{option.name}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="角色">
        <a-select
            placeholder='请选择系统'
            v-decorator="['role', {rules: [{required: true, message: '请选择角色!'}]}]"
            @change="roleSelectChange"
        >
          <a-select-option v-for="option in roleListSelect.children" :key="option.id" :value="option.id">
            {{option.name}}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: "EnterpriseModal",
  props: {
    enterpriseVisible: {
      type: [Boolean],
      default: () => false,
    },
    guidList: {
      type: [Array],
      default: () => ([]),
    },
    roleListOptions: {
      type: [Array],
      default: () => ([]),
    },
    ok: {
      type: [Function],
      default: ({roleListSelect, roleListSelectChildren}) => ({roleListSelect, roleListSelectChildren})
    }
  },
  data() {
    return{
      enterpriseModalForm: this.$form.createForm(this, {name: 'enterpriseModalForm'}),
      roleListSelect: [],
      roleListSelectChildren: {}
    }
  },
  methods: {
    sysSelectChange(value) {
      this.roleListSelect = this.roleListOptions.find((item) => item.id === value);
    },
    roleSelectChange(value) {
      this.roleListSelectChildren = this.roleListSelect.children.find((item) => item.id === value);
    },
    enterpriseOk() {
      this.enterpriseModalForm.validateFields((err) => {
        if (!err) {
          const {roleListSelect, roleListSelectChildren, ok} = this;
          try {
            ok && ok({
              roleListSelect,
              roleListSelectChildren
            })
          }catch (e) {
            Promise.reject(err)
          }
        }
      })
    },
    enterpriseCancel() {
      this.$emit('update:enterpriseVisible', false)
    }
  }
}
</script>

<style scoped>

</style>
